<template>
  <div>
    <div class="warningInner">
      <!-- 案例展示 -->
      <div v-for="(item, index) in caseData" :key="index" class="caseBox">
        <!-- <div :class="[item.imageId ? 'caseInfo2' : 'caseInfo1']"> -->
        <div class="caseInfo1">
          <img :src="require('@/assets/images/icon5.png')" alt="">
          <div class="caseTitle" @click="toArticle(item, index)">
            {{ item.noticeTitle }}
          </div>
          <div class="caseDate">{{ item.pushTime }}</div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination
        v-if="caseData.length"
        background
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :current-page="current"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { GetContentNoticeList, GetContentTypeList } from '@/api/contentnotice';
export default {
  name: 'CaseList',
  components: {},
  props: {
    searchContent: {},
    needType: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      typeList: [],
      dataType: '',
      pageSize: 10,
      current: 1,
      total: 1,
      // basicUrl: process.env.VUE_APP_BASE_API + '/api/',
      basicUrl: '',
      caseData: []
    };
  },
  computed: {},
  watch: {
    // 搜索
    searchContent(newVal, oldVal) {
      this.getData();
    }
  },
  created() {
    this.basicUrl = window.location.origin + '/api/';
    if (this.needType) {
      this.getType();
    } else {
      this.getData();
    }
  },
  mounted() {},
  methods: {
    // 获取数据类型表
    getType() {
      const formData = new FormData()
      // 第一个值是key,第二个是value
      formData.append('current', 1)
      formData.append('size', 999)
      const params = new URLSearchParams(formData)
      GetContentTypeList(params).then((res) => {
        this.typeList = res.data.records;
        this.typeList.forEach((item) => {
          if (item.typeName === this.$route.meta.title) {
            this.dataType = item.id;
            this.getData();
          }
        });
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getData();
    },
    // 获取内容列表
    async getData() {
      const obj = {
        current: this.current,
        size: this.pageSize,
        noticeTitle: this.searchContent,
        typeId: this.needType ? this.dataType : '',
        status: 4
      };
      try {
        const result = await GetContentNoticeList(obj);
        this.caseData = result.data.records;
        this.total = result.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    // 跳转内容页
    toArticle(item, index) {
      const obj = {
        id: item.id
      };
      this.$router.push({ path: '/article', query: obj });
    }
  }
};
</script>

<!--<style lang="scss" scoped>-->
<style lang="less" scoped>
@aaa: 192;
.warningInner {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .caseBox {
    height: (40rem / @aaa);
    width: 100%;
    padding: (14rem / @aaa) 0;
    display: flex;
    border-bottom: (1rem / @aaa) dashed #024da0;
    flex-direction: row;
    .caseInfo1 {
      width: 100%;
      display: flex;
      img {
        width: (8rem / @aaa);
        height: (8rem / @aaa);
        margin: auto (10rem / @aaa) auto (30rem / @aaa);
      }
      .caseTitle {
        height: (40rem / @aaa);
        // color: #254c8a;
        // text-align: left;
        font-size: (18rem / @aaa);
        line-height: (40rem / @aaa);
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          cursor: pointer;
          color: #4497f7;
        }
      }
      .caseDate {
        text-align: right;
        margin-right: (9rem / @aaa);
        font-size: (18rem / @aaa);
        line-height: (40rem / @aaa);
        width: 100%;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@aaa: 192;
.warningInner::v-deep .el-pagination {
  text-align: center;
  font-size:(14rem / @aaa);
  line-height:(22rem / @aaa);
  margin-top: (20rem / @aaa);
  margin-bottom: (80rem / @aaa);
}
</style>
